<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style TYPE="text/css">
        section {
            margin: 10px;
            padding: 10px;
            outline: 1px solid red;
        }

        .out {
            outline: 1px solid #e0e0e0;
        }

        #p03 button {
            background-color: white;
        }
    </style>

</head>
<body>

<section id="p01">
    <form>
        <div class="form-group">
            <label for="email01">Email address</label>
            <input type="email" id="email01" class="form-control" placeholder="Email">
            <br/>
            <label for="password01">Password</label>
            <input type="password" id="password01" class="form-control" placeholder="Password">
            <br/>
            <label for="file">File input</label>
            <input type="file" id="file">
            <p class="help-block">Example block-level help text here.</p>
        </div>

        <div class="checkbox">
            <label><input type="checkbox">Check me out</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</section>

<section id="p02">
    <form class="form-horizontal">
        <div class="form-group">
            <label for="user01" class="col-sm-1 control-label">账号</label>
            <div class="col-sm-11">
                <input id="user01" type="email" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label for="password02" class="col-sm-1 control-label">密码</label>
            <div class="col-sm-11">
                <input id="password02" type="email" class="form-control"/>
            </div>
        </div>
    </form>
</section>

<section id="p03">
    <article class="btn-group out">
        <button type="button" class="btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon glyphicon-erase"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-floppy-disk"></span></button>
        <button type="button" class="btn btn-disabled"><span style="color: #e0e0e0">|</span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span aria-hidden="true">普通文本</span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span aria-hidden="true">微软雅黑</span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span aria-hidden="true">14</span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-bold"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-italic"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-magnet"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-text-width"></span></button>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span class="glyphicon glyphicon-text-color" aria-hidden="true"></span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-align-justify"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-list"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-folder-close"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-retweet"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-console"></span></button>
        <button type="button" class="btn"><span style="color: #e0e0e0">|</span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
        <button type="button" class="btn"><span class="glyphicon glyphicon-indent-left"></span></button>
        <button type="button" class="btn"><span class="glyphicon glyphicon-indent-right"></span></button>
        <article class="dropdown btn-group">
            <button class="btn " type="button"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </article>
    </article>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>